<template>
  <ActionPanel>
    <ElDescriptions :column="column" border>
      <ElDescriptionsItem label="名称">
        <el-input v-model="name" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="类型">
        <ElSelect v-model="data.type">
          <ElOption v-for="(value, key) in columnTypeOptions" :label="value" :value="key" :key="key" />
        </ElSelect>
      </ElDescriptionsItem>
      <ElDescriptionsItem label="标签">
        <el-input v-model="data.label" />
      </ElDescriptionsItem>
      <ElDescriptionsItem v-if="!isRef" label="默认值">
        <el-input v-model="data.defVal" />
      </ElDescriptionsItem>
      <ElDescriptionsItem v-if="!isRef" label="长度">
        <el-input-number v-model="data.length" />
      </ElDescriptionsItem>
      <ElDescriptionsItem v-if="!isRef" label="是否必填">
        <ElSwitch v-model="data.required" />
      </ElDescriptionsItem>
      <ElDescriptionsItem v-if="!isRef" label="是否唯一">
        <ElSwitch v-model="data.unique" />
      </ElDescriptionsItem>
      <ElDescriptionsItem v-if="!isRef" label="是否大字段">
        <ElSwitch v-model="data.isLarge" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="注释" :span="column">
        <el-input type="textarea" v-model="data.comment" />
      </ElDescriptionsItem>
      <ElDescriptionsItem v-if="isFloat" label="范围">
        <el-input-number v-model="data.scale" />
      </ElDescriptionsItem>
      <ElDescriptionsItem v-if="isFloat" label="精度">
        <el-input-number v-model="data.precision" />
      </ElDescriptionsItem>
      <ElDescriptionsItem v-if="isString || isNumber" :label="`最小${isString ? '长度' : '值'}`">
        <el-input v-model="data.min" />
      </ElDescriptionsItem>
      <ElDescriptionsItem v-if="isString || isNumber" :label="`最大${isString ? '长度' : '值'}`">
        <el-input v-model="data.max" />
      </ElDescriptionsItem>
      <ElDescriptionsItem v-if="isRef" label="引用值" :span="column">
        <ColumnRelEditor v-model="data.rel" :seed-name="seedName" />
      </ElDescriptionsItem>
      <ElDescriptionsItem v-if="isEnum" label="选项" :span="column">
        <OptionsEditor v-model="data.options" />
      </ElDescriptionsItem>
    </ElDescriptions>
    <template #footer>
      <ElButton type="primary" @click="doSave">保存</ElButton>
      <ElButton @click="close">关闭</ElButton>
    </template>
  </ActionPanel>
</template>
<script lang="ts" setup>
  import { ElInput, ElSelect, ElOption, ElButton, ElDescriptions, ElDescriptionsItem, ElSwitch, ElInputNumber } from 'element-plus'
  import { getSeed } from '@/views/seed-dev'
  import { computed, inject, ref } from 'vue';
  import { columnTypeOptions } from '@/views/types';
  import feedback from '@/utils/feedback';
  import { save } from '..';
  import { ActionPanel } from '@/components/ActionPanel';
  import { closePopupKey } from '@/components/Popup';
  import { ColumnConfiguration } from '@/views/dev-types';
  import { OptionsEditor } from '../../OptionsEditor';
  import { ColumnRelEditor } from '../../ColumnRelEditor';

  const props = defineProps<{seedName: string}>()
  const isFloat = computed(() => ['float', 'double','decimal'].includes(data.value.type))
  const isRef = computed(() => data.value.type === 'ref')
  const isEnum = computed(() => data.value.type === 'enum')
  const isNumber = computed(() => ['tinyint','smallint','mediumint','int','bigint','double','float','decimal'].includes(data.value.type))
  const isString = computed(() => ['varchar','tinytext','text','mediumtext','longtext','password','account'].includes(data.value.type))
  const column = 2

  const close = inject<() => void>(closePopupKey, void 0)
  function validate() {
    if (!name.value) {
      feedback.alertError('名称不能为空')
      return false
    }

    if(data.value.type === 'ref' && !data.value.rel) {
      feedback.alertError(`【引用】类型的【引用值】不能为空`)
      return false
    }

    const seed = getSeed(props.seedName)
    const columns = seed.columns
    if(!columns) return true

    if(Object.keys(columns).includes(name.value)) {
      feedback.alertError(`列【${name.value}】已存在`)
      return false
    }

    return true
  }

  const name = ref<string>()
  const data = ref<ColumnConfiguration>({})

  function doSave() {
    if(validate()) {
      save(props.seedName, name.value, data.value)
      close?.()
    }
  }
  
</script>